<!--  -->
<template>
  <div>
    <a-card :bordered="false">
      <f-table style="margin-top: 30px" ref="table" size="default" :multiple="false"   rowKey="materialPlanId"  :columns="newColumns" :scroll="{x:1980,y:columns.length*35}" :params="queryParam" :api="api.purseDetail" >
        <span slot="number" slot-scope="text, record">
          <a-tag color="#108ee9" @click="$refs.resum.handleShow(record)">{{ text }}</a-tag>
        </span>

        <template v-for="col in editSlots" :slot="col" slot-scope="text, record, index" :row-selection="rowSelection">
          <div :key="col">
            <a-date-picker  style="width: 100%"  v-if="editingKey=== record.materialPlanId&&col=='receivedDate'" value-format='YYYY-MM-DD' format='YYYY-MM-DD' type="date" v-model="receivedDate"  @change="handleChange(receivedDate,record.materialPlanId, col,record)" > </a-date-picker>
            <a-select  v-else-if ="editingKey=== record.materialPlanId&&col=='caseType'" style="width: 150px;" :filter-option="filterOption" showSearch="true" optionFilterProp="children"  v-model="caseType" @change="handleChange(caseType,record.materialPlanId, col,record)">
              <a-select-option  v-for ="item in dicList" :key="item.name" :value="item.name">
                {{item.name}}
              </a-select-option>
            </a-select>
            <a-select  v-else-if ="editingKey=== record.materialPlanId&&col=='vendorName'" style="width: 150px;" :filter-option="filterOption"  showSearch="true" optionFilterProp="children"    v-model="vendorName"   @change="handleChange(vendorName, record.materialPlanId, col,record)"  >
              <a-select-option  v-for ="item1 in supplierList" :key="item1.supplierName" :value="item1.supplierName" >
                {{item1.supplierName}}
              </a-select-option>
            </a-select>
            <a-input v-else-if="editingKey=== record.materialPlanId&&col=='purchaseCount'" style="margin: -5px 0" :value="text" @change="(e) => handleChange(e.target.value, record.materialPlanId, col,record)" />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
      </f-table>
    </a-card>
  </div>
</template>

<script>
  import api from './js/api'
  export default {
    components: {
    },
    props: {
      detailsParams: {},
      projectStatus: {
        type: String,
        default: ''
      }
    },
    data() {
      //这里存放数据
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        flag: false,
        modalVisible: false,
        editingKey: '',
        scorykey: '',
        supplierId: '',
        value: '',
        caseType: '',
        vendorName: '',
        receivedDate: '',
        code: '',
        dicList: [],
        columns: [{
          title: '编号',
          align: 'center',
          width: 100,
          dataIndex: 'materialPlanId',
          scopedSlots: {
            customRender: 'materialPlanId'
          }
        },
          {
            title: '工程包名称',
            align: 'center',
            width: 100,
            dataIndex: 'packageName',
            scopedSlots: {
              customRender: 'packageName'
            }
          },
          {
            title: '工程包代码',
            align: 'center',
            width: 100,
            dataIndex: 'packageNo',
            scopedSlots: {
              customRender: 'packageNo'
            }
          },
          {
            title: '专业包名称',
            align: 'center',
            width: 100,
            dataIndex: 'majorName',
            scopedSlots: {
              customRender: 'majorname'
            }
          },
          {
            title: '专业包代码',
            align: 'center',
            width: 100,
            dataIndex: 'majorCode',
            scopedSlots: {
              customRender: 'majorCode'
            }
          },
          {
            title: '物料代码',
            align: 'center',
            width: 100,
            dataIndex: 'materialCode',
            scopedSlots: {
              customRender: 'materialCode'
            }
          },
          {
            title: 'WBS代码',
            align: 'center',
            width: 100,
            dataIndex: 'materialWbsCode',
            scopedSlots: {
              customRender: 'materialWbsCode'
            }
          },

          {
            title: '设备、材料名称',
            align: 'center',
            width: 200,
            dataIndex: 'materialName',
            scopedSlots: {
              customRender: 'materialName'
            }
          },
          // {
          //   title: '型号/规格',
          //   align: 'center',
          //   width: 200,
          //   dataIndex: 'materiaSpecs',
          //   scopedSlots: {
          //     customRender: 'materiaSpecs'
          //   }
          // },
          {
            title: '项目名称',
            align: 'center',
            width: 200,
            dataIndex: 'materiaSpecs',
            scopedSlots: {
              customRender: 'materiaSpecs'
            }
          },
          {
            title: '技术参数或技术说明',
            align: 'center',
            width: 200,
            dataIndex: 'technicalData',
            scopedSlots: {
              customRender: 'technicalData'
            }
          },
          {
            title: '层级号',
            align: 'center',
            width: 100,
            dataIndex: 'levelNo',
            scopedSlots: {
              customRender: 'levelNo'
            }
          },
          {
            title: '区域',
            align: 'center',
            width: 100,
            dataIndex: 'materialArea',
            scopedSlots: {
              customRender: 'materialArea'
            }
          },
          {
            title: '系统',
            align: 'center',
            width: 100,
            dataIndex: 'materialUse',
            scopedSlots: {
              customRender: 'materialUse'
            }
          },
          {
            title: '计量单位',
            align: 'center',
            width: 100,
            dataIndex: 'measurementUnit',
            scopedSlots: {
              customRender: 'measurementUnit'
            }
          },
          {
            title: '100预算工程量',
            align: 'center',
            width: 150,
            dataIndex: 'costQuantity100',
            scopedSlots: {
              customRender: 'costQuantity100'
            }
          },
          {
            title: '200预算工程量',
            align: 'center',
            width: 150,
            dataIndex: 'costQuantity200',
            scopedSlots: {
              customRender: 'costQuantity200'
            }
          },
          {
            title: '损耗率',
            align: 'center',
            width: 100,
            dataIndex: 'loss',
            scopedSlots: {
              customRender: 'loss'
            }
          },
          {
            title: '采购计划量',
            align: 'center',
            width: 100,
            dataIndex: 'planPurchaseCount',
            scopedSlots: {
              customRender: 'planPurchaseCount'
            }
          },
          {
            title: '在途',
            align: 'center',
            width: 100,
            dataIndex: 'ztPurchaseCount',
            scopedSlots: {
              customRender: 'ztPurchaseCount'
            }
          },
          {
            title: '到货',
            align: 'center',
            width: 100,
            dataIndex: 'dhPurchaseCount',
            scopedSlots: {
              customRender: 'dhPurchaseCount'
            }
          },
          {
            title: '本次采购量',
            align: 'center',
            width: 100,
            dataIndex: 'purchaseCount',
            scopedSlots: {
              customRender: 'purchaseCount'
            }
          },
          {
            title: '计划到货时间',
            align: 'center',
            width: 200,
            dataIndex: 'receivedDate',
            scopedSlots: {
              customRender: 'receivedDate'
            }

          },
          {
            title: '单据类型',
            align: 'center',
            width: 180,
            dataIndex: 'caseType',
            scopedSlots: {
              customRender: 'caseType'
            }
          },
          {
            title: '班组',
            align: 'center',
            width: 180,
            dataIndex: 'vendorName',
            scopedSlots: {
              customRender: 'vendorName'
            }
          },
          {
            title: '剩余采购量',
            align: 'center',
            width: 100,
            dataIndex: 'endPurchaseCount',
            scopedSlots: {
              customRender: 'endPurchaseCount'
            }
          },
          {
            title: '备注',
            align: 'center',
            width: 100,
            dataIndex: 'remark',
            scopedSlots: {
              customRender: 'remark'
            }
          }
        ],
        columnsCopy: [],
        editSlots: ['purchaseCount', 'receivedDate', 'caseType', 'vendorName'],
        version: '',
        projectId: '',
        column: '',
        newColumns: [],
        data: []
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
     this.initparams()
    },
    //方法集合
    methods: {
      initparams () {
        this.projectId = this.$route.query.projectId
        this.column = this.$route.query.columns
        let columnsStr= this.$route.query.columns
        let majorCode = this.$route.query.majorCode
        let packageNo = this.$route.query.packageNo
        // 循环columns 控制显示与隐藏
        let params = {
          projectId: this.projectId,
          applyStatus: 1,
          purseApplayStatus: 1,
          version: '100.01',
          majorCode: majorCode,
          packageNo: packageNo
        }
        this.queryParam = params
        if (columnsStr) {
          let newColumns = []
          let queryColumns = columnsStr.split(',')
          this.columns.forEach(column => {
            let dataIndex = column.dataIndex
            queryColumns.forEach(queryColumn => {
              if (dataIndex == queryColumn) {
                newColumns.push(column)
              }
            })
          })
          this.newColumns = newColumns
        } else {
          this.newColumns = this.columns
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类
</style>
